Udemy
    •  
    •  
    •  
    •  
    •  
    •  
    •  
    •  
Subscribe
Turn what you know into an opportunity and reach millions around the world.
Learn More
Your cart is empty.
Keep shopping
Bootstrap Bootcamp (featuring Bootstrap 5)
Rating: 4.6 out of 5(41 ratings)
154 students

Bootstrap Bootcamp (featuring Bootstrap 5)

Get a solid foothold of Bootstrap 5 by building a portfolio-based website in HTML/CSS
Created byHaydn Adams, BFA
Last updated 6/2021
English

What you'll learn

  • How to use Bootstrap 5
  • How to connect a form up to Netlify
  • How to send a form through Netlify
  • How to upload a website to Netlify

Course content

1 section • 27 lectures • 2h 9m total length

  • Example images for project0:02
  • Source Code for project0:05
  • Bootstrap starter template3:23
  • Adding a custom css file1:56
  • The container4:14

    Explore how the Bootstrap 5 container creates responsive layouts from mobile to desktop using breakpoints and grid, with widths at 540, 720, 960, 1140, and 1320 pixels.

  • Setting up the Navigation11:45

    Create a responsive Bootstrap 5 navigation inside the container, featuring a brand logo, a collapsible hamburger menu for small screens, and navigation links to about, portfolio, and contact pages.

  • Adding the SVG logo2:44
  • Setting up the hero graphic7:01
  • Centering the hero text with Flex6:02
  • X-axis and y-axis spacing6:00

    learn to implement a centered single call with a max width of 750px inside a bootstrap 5 container, using mx auto and my spacing for balanced horizontal and vertical margins.

  • Text-center and lead3:30
  • The footer and bootstrap icons10:12
  • Setting up the about page1:57
  • About page content with floats and overflow8:46
  • The grid10:03

    Explore Bootstrap's grid by composing a container, a row, and responsive columns (col-12, col-md-6, col-lg-4) to create mobile, tablet, and desktop 1-3 column layouts for a portfolio.

  • Bootstrap 5 cards4:14
  • Bootstrap buttons3:47
  • Gutters6:04
  • Setting up the contact page2:02
  • Adding contact details2:40
  • Setting up the form12:24
  • Netlify and the drag and drop method2:16
  • Netlify forms6:53
  • Adding the honeypot to the form2:25

    Add a honeypot to the contact form using a hidden bot field to detect bots and prevent spam, enhancing form security with Bootstrap 5.

  • A little additional cleanup5:24
  • A sticky footer3:13
  • In conclusion0:33

Requirements

  • Nope. Start from complete scratch

Description

Design. Build. Deploy. Quickly.

In the Bootstrap Bootcamp course, you'll build you're own portfolio, utilizing the tools provided in Bootstrap. We'll leverage the responsive power of bootstrap to make your website look perfect on any device—from the biggest desktop to an old iPhone 6.

We'll design a portfolio that not only functions, but looks gorgeous. Display your artwork, hobbies or other crafts in this visual portfolio. We'll build from the ground up, step by step.

Websites shouldn't just live on your computer. They should be seen by the entire world. That's why I make sure to show you how to upload / deploy your work out there for everyone to see. And connect a domain name to it as well.

We will cover how to use the following in this course:

  • Responsive Web Design

  • Grid / Container

  • Nav / Navbar

  • SVG logo integration

  • Flex / Flexbox

  • Heading / Paragraph styling

  • Form Design

  • Cards

  • Deploying your website

  • …and more!

** BONUS **

I'll also walk you through how to setup a working form through Netlify. You'll learn how to create a success page as well, so your entries will pass through properly. We will setup the form using Bootstrap 5's form design.

I wanted this course to be concise, so you can quickly grasp the power of Bootstrap 5 and be on your way. I'm so excited to showcase the awesome power of Bootstrap 5.

Who this course is for:

  • web developers
  • web designers
  • students

Report abuse